//所有二级菜单初始化隐藏，背景取消
$('.sub-nav').hide();
// $('.nav .sub-nav li').prop('class', '');
//右边主要内容初始化隐藏
$('.page').hide();
//事件委托
$('.nav').on('click', 'p', function() {
    $(this).next('.sub-nav').toggle();
})


//渲染学生
showStudents();
async function showStudents() {
    let studentsData = await getStudents();
    studentsRender(studentsData);
}
//专业渲染
showMajor();
async function showMajor() {
    let majorData = await getMajor();
    majorTableRender(majorData);
    majorSelectRender(majorData);
    studentsMajorRender(majorData);
    subMajorRender(majorData);
}
//渲染班级
showClasses();
async function showClasses() {
    let classesData = await getClasses();
    classesTableRender(classesData);
    studentsClassesRender(classesData);
    subClassesRender(classesData);
}


//右边内容切换
$('.nav .sub-nav li').each((index, item) => {
        // console.log(item);

        $(item).click(function() {
            if ($(item).html() == '学生列表') {
                $('.nav .sub-nav li').prop('class', '');
                $(item).prop('class', 'gray');
                $('.page').hide();
                $('.one-page').show();
            }
            if ($(item).html() == '新增学生') {
                $('.nav .sub-nav li').prop('class', '');
                $(item).prop('class', 'gray');
                $('.page').hide();
                $('.two-page').show();
            }
            if ($(item).html() == '新增专业') {
                $('.nav .sub-nav li').prop('class', '');
                $(item).prop('class', 'gray');
                $('.page').hide();
                $('.nine-page').show();
            }
            if ($(item).html() == '专业列表') {
                $('.nav .sub-nav li').prop('class', '');
                $(item).prop('class', 'gray');
                $('.page').hide();
                $('.ten-page').show();
            }
            if ($(item).html() == '新增班级') {
                $('.nav .sub-nav li').prop('class', '');
                $(item).prop('class', 'gray');
                $('.page').hide();
                $('.three-page').show();
            }
            if ($(item).html() == '班级列表') {
                $('.nav .sub-nav li').prop('class', '');
                $(item).prop('class', 'gray');
                $('.page').hide();
                $('.four-page').show();
            }
        })

    })
    //新增学生
$('#addStudent').click(function() {
        let name = $('#name').val();
        let age = $('#age').val();
        let gender = $('[name=gender]:checked').val();
        let classesId = $('#students-classes').children('option:selected').val();
        let majorId = $('#students-major').children('option:selected').val();
        // console.log(name, age, gender, classesId);
        $.ajax({
            url: '/students/createStudents',
            type: 'post',
            data: {
                name,
                age,
                gender,
                classesId,
                majorId
            },
            success(res) {
                alert('新增成功', res);
                showStudents();
            }
        })
    })
    //渲染学生

function getStudents() {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: '/students/getStudents',
            type: 'get',
            success(res) {
                if (res.code) {
                    resolve(res.result);
                    // console.log(res.result);
                }
            }
        })
    })
}

function studentsRender(data) {
    // console.log(data);
    let studentsHtml = data.map(item =>
        `<tr>
        <td>${item._id}</td>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender}</td>
        <td>${item.classesId.name}</td>
        <td>${item.majorId.name}</td>
        <td></td>
        <td>
            <button class="change" data-id='${item._id}'>修改</button>
            <button class="del" data-id='${item._id}'>删除</button>
        </td>
    </tr>`
    ).join('');
    // console.log(studentsHtml);
    $('.students-list').html(studentsHtml);
}
//新增学生渲染专业
function studentsMajorRender(data) {
    let studentsMajorHtml = data.map(item => `
        <option value="${item._id}">${item.name}</option>
    `).join('');
    $('#students-major').html(studentsMajorHtml);
}
//新增学生渲染班级


$('#students-major').change(function() {

    showClasses();
});

function studentsClassesRender(data) {
    let text = $('#students-major').children('option:selected').html();
    // console.log(text);
    // console.log(data);
    let result = data.filter(item => {
        if (item.majorId.name == text) {
            return item;
        }
    });
    // console.log(result, 545454545);
    let studentsClassesHtml = result.map(item => `
        <option value="${item._id}">${item.name}</option>
    `).join('');
    $('#students-classes').html(studentsClassesHtml);
}



//删除学生
$('.students-list').on('click', '.del', function() {
    let _id = $(this).attr('data-id');
    $.ajax({
        url: '/students/delStudents',
        type: 'get',
        data: {
            _id
        },
        success(res) {
            if (res.code) {

                showStudents();
                // alert('删除成功！');
            }
        }
    })
})

//修改学生
function subMajorRender(data) {
    let studentsMajorHtml = data.map(item => `
        <option value="${item._id}">${item.name}</option>
    `).join('');
    $('#sub-students-major').html(studentsMajorHtml);
}
//新增学生渲染班级


$('#sub-students-major').change(function() {

    showClasses();

});

function subClassesRender(data) {
    let text = $('#sub-students-major').children('option:selected').html();
    // console.log(text);
    // console.log(data);
    let result = data.filter(item => {
        if (item.majorId.name == text) {
            return item;
        }
    });
    // console.log(result, 545454545);
    let studentsClassesHtml = result.map(item => `
        <option value="${item._id}">${item.name}</option>
    `).join('');
    $('#sub-students-classes').html(studentsClassesHtml);
}

//点击获取当前学生信息
$('.students-list').on('click', '.change', function() {
    let subId = $(this).data('id');
    $('#sub-page').prop('class', 'index2');

    subShowStudents();
    subGetStudents(subId);
});

//取出学生信息
async function subShowStudents() {
    let subStudentsData = await subGetStudents();
    subPageRender(subStudentsData);

}

function subGetStudents(subId) {
    let _id = subId;
    return new Promise((resolve, reject) => {
        $.ajax({
            url: '/students/changeStudents',
            type: 'get',
            data: {
                _id
            },
            success(res) {
                if (res.code) {
                    // console.log(res.result);
                    resolve(res.result);
                }
            }
        })
    })
}
//渲染subPage页面
async function subPageRender([data]) {
    // console.log(data);

    $('.sub-change').attr('data-id', data._id);
    $('#sub-name').val(data.name);
    $('#sub-age').val(data.age);
    $(`[name=sub-gender][value=${data.gender}]`).prop('checked', true);
    $('#sub-students-major').val(data.majorId._id);
    // console.log(data.classesId._id);
    await showClasses();
    $('#sub-students-classes').val(data.classesId._id);
}


$('.sub-change').click(async function() {

        $('#sub-page').prop('class', 'index1');

        await changeMessage();

        await showMajor();
        await showClasses();
        showStudents();
    })
    //获取学生修改信息
function changeMessage() {
    let _id = $('.sub-change').data('id');

    let name = $('#sub-name').val();
    let age = $('#sub-age').val();
    let gender = $('[name=sub-gender]:checked').val();
    let classesId = $('#sub-students-classes').children('option:selected').val();
    let majorId = $('#sub-students-major').children('option:selected').val();
    // console.log(_id, name, age, gender, classesId, majorId);
    $.ajax({
        url: '/students/subChangeStudents',
        type: 'post',
        data: {
            _id,
            name,
            age,
            gender,
            classesId,
            majorId
        },
        success(res) {
            if (res.code) {
                alert('修改成功！');
            }
        }

    })
}


//新增专业
$('#addMajor').click(function() {
        let name = $('.major input').val();
        $.ajax({
            url: '/major/createMajor',
            type: 'post',
            data: {
                name
            },
            success(res) {
                if (res.code) {
                    alert('新增专业成功！');
                    showMajor();

                }
            }
        })
    })
    //专业渲染
function getMajor() {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: '/major/getMajor',
            success(res) {
                if (res.code) {
                    resolve(res.result);
                }
            }
        })
    })
}

function majorTableRender(data) {
    let majorHtml = data.map(item => `
        <tr>
            <td>${item._id}</td>
            <td>${item.name}</td>
            <td>
                <button class="change">修改</button>
                <button class="del">删除</button>
            </td>
        </tr>
    `).join('');
    $('.major-list').html(majorHtml);
}
//新增班级
function majorSelectRender(data) {
    // console.log(data);
    let majorHtml = data.map(item => `
        <option value="${item._id}">${item.name}</option>
    `).join('');
    $('#get-major').html(majorHtml);
};
//确认新增班级
$('#addClasses').click(function() {
        let majorId = $('#get-major').val();
        let name = $('#get-classes').val();
        $.ajax({
            url: '/classes/createClasses',
            type: 'post',
            data: {
                name,
                majorId
            },
            success(res) {
                if (res.code) {
                    alert('新增班级成功！');
                    showClasses();
                }
            }
        })
    })
    //渲染班级
function getClasses() {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: '/classes/getClasses',
            type: 'get',
            success(res) {
                if (res.code) {
                    resolve(res.result);
                }
            }
        })
    })
}

function classesTableRender(data) {
    let classesHtml = data.map(item => `
        <tr>
            <td>${item._id}</td>
            <td>${item.majorId.name}</td>
            <td>${item.name}</td>
            <td>
                <button class="change">修改</button>
                <button class="del">删除</button>
            </td>
        </tr>
    `).join('');
    $('.classes-list').html(classesHtml);
}